<template>
  <div class="node-wrap" v-if="nodeConfig.type < 3">
    <!-- :class="(nodeConfig.type == 0 ? 'start-node ' : '') + (nodeConfig.error ? 'active error' : '')" -->
    <div class="node-wrap-box">
      <div
        class="title"
        :style="`background: rgb(${bgColors[nodeConfig.type]});`"
      >
        <span v-if="nodeConfig.type == 0">{{ nodeConfig.name }}</span>
        <template v-else>
          <span class="iconfont">{{ nodeConfig.type == 1 ? '' : '' }}</span>
          <input
            v-if="isInput"
            type="text"
            class="ant-input editable-title-input"
            @blur="blurEvent()"
            v-focus
            v-model="nodeConfig.name"
            :placeholder="defaultText"
          />
          <span v-else class="editable-title" @click="clickEvent()">{{
            nodeConfig.name
          }}</span>
          <i class="anticon anticon-close close" @click="delNode"></i>
        </template>
      </div>
      <div class="content" @click="setPerson('')">
        <div class="text">
          <span class="placeholder" v-if="!showText"
            >请选择{{ defaultText }}</span
          >
          {{ showText }}
        </div>
        <i class="anticon anticon-right arrow"></i>
      </div>
      <!-- <div class="error_tip" v-if="nodeConfig.error">
                <i class="anticon anticon-exclamation-circle"></i>
            </div> -->
    </div>
    <addNode v-model:childNodeP="nodeConfig.childNode" />
  </div>
  <div class="branch-wrap" v-if="nodeConfig.type == 4">
    <div class="branch-box-wrap">
      <div class="branch-box">
        <button class="add-branch" @click="addTerm">添加条件</button>
        <div
          class="col-box"
          v-for="(item, index) in nodeConfig.conditionNodes"
          :key="index"
        >
          <div class="condition-node">
            <div class="condition-node-box">
              <div class="auto-judge" :class="item.error ? 'error active' : ''">
                <div
                  class="sort-left"
                  v-if="index != 0"
                  @click="arrTransfer(index, -1)"
                  >&lt;</div
                >
                <div class="title-wrapper">
                  <input
                    v-if="isInputList[index]"
                    type="text"
                    class="ant-input editable-title-input"
                    @blur="blurEvent(index)"
                    @focus="$event.currentTarget.select()"
                    v-focus
                    v-model="item.name"
                  />
                  <span
                    v-else
                    class="editable-title"
                    @click="clickEvent(index)"
                    >{{ item.name }}</span
                  >
                  <span class="priority-title" @click="setPerson(item.priority)"
                    >优先级{{ item.priority }}</span
                  >
                  <i
                    class="anticon anticon-close close"
                    @click="delTerm(index)"
                  ></i>
                </div>
                <div
                  class="sort-right"
                  v-if="index != nodeConfig.conditionNodes.length - 1"
                  @click="arrTransfer(index, 1)"
                  >&gt;
                </div>
                <div class="content" @click="setPerson(item.priority)">{{
                  $func.conditionStr(nodeConfig, index)
                }}</div>
                <!-- <div class="error_tip" v-if="item.error">
                                    <i class="anticon anticon-exclamation-circle"></i>
                                </div> -->
              </div>
              <addNode v-model:childNodeP="item.childNode" />
            </div>
          </div>
          <TreeItem v-if="item.childNode" v-model:nodeConfig="item.childNode" />
          <template v-if="index == 0">
            <div class="top-left-cover-line"></div>
            <div class="bottom-left-cover-line"></div>
          </template>
          <template v-if="index == nodeConfig.conditionNodes.length - 1">
            <div class="top-right-cover-line"></div>
            <div class="bottom-right-cover-line"></div>
          </template>
        </div>
      </div>
      <addNode v-model:childNodeP="nodeConfig.childNode" />
    </div>
  </div>
  <TreeItem
    v-if="nodeConfig.childNode"
    v-model:nodeConfig="nodeConfig.childNode"
  />
</template>

<script setup lang="ts">
  import { onMounted, ref, watch, getCurrentInstance, computed } from 'vue';
  import $func from './plugins/preload';
  import { useFlowStore } from '@/store';

  const flowStore = useFlowStore();
  let emits = defineEmits(['update:flowPermission', 'update:nodeConfig']);
  let _uid = getCurrentInstance().uid;
  // const props = defineProps({
  //     nodeConfig: {
  //         type: Object,
  //         default: () => ({}),
  //     },
  //     flowPermission: {
  //         type: Object,
  //         default: () => [] || {},
  //     },
  // });
  let props = defineProps({
    nodeConfig: {
      type: Object,
      default: () => ({}),
    },
    flowPermission: {
      type: Object,
      default: () => [] || {},
    },
  });
  // 添加条件
  const addTerm = () => {
    let len = props.nodeConfig.conditionNodes.length + 1;
    props.nodeConfig.conditionNodes.push({
      name: '条件' + len,
      type: 3,
      priority: len,
      conditionList: [],
      nodeUserList: [],
      childNode: null,
    });
    // resetConditionNodesErr()
    emits('update:nodeConfig', props.nodeConfig);
  };
  const delNode = () => {
    emits('update:nodeConfig', props.nodeConfig.childNode);
  };
  let bgColors = ['87, 106, 149', '255, 148, 62', '50, 150, 250'];
  let placeholderList = ['发起人', '审核人', '抄送人'];
  let defaultText = computed(() => {
    return placeholderList[props.nodeConfig.type];
  });
  let isInputList = ref<any>([]);
  let isInput = ref(false);

  const blurEvent = (index: number = -1) => {
    if (index === -1) {
      isInput.value = false;
      props.nodeConfig.name = props.nodeConfig.name || defaultText;
    } else {
      isInputList.value[index] = false;
      props.nodeConfig.conditionNodes[index].name =
        props.nodeConfig.conditionNodes[index].name || '条件';
    }
  };
  // 点击编辑卡片名称
  const clickEvent = (index: number = -1) => {
    if (index === -1) {
      isInput.value = true;
    } else {
      isInputList.value[index] = true;
    }
  };
  // 发起人如果为空，则是所有人可发起审批
  let showText = computed(() => {
    if (props.nodeConfig.type == 0)
      return $func.arrToStr(props.flowPermission) || '所有人';
    if (props.nodeConfig.type == 1)
      return $func.setApproverStr(props.nodeConfig);
    return $func.copyerStr(props.nodeConfig);
  });
  // 条件优先级切换
  const arrTransfer = (index: number, type = 1) => {
    //向左-1,向右1
    props.nodeConfig.conditionNodes[index] =
      props.nodeConfig.conditionNodes.splice(
        index + type,
        1,
        props.nodeConfig.conditionNodes[index]
      )[0];
    props.nodeConfig.conditionNodes.map((item: any, index: any) => {
      item.priority = index + 1;
    });
    // resetConditionNodesErr()

    emits('update:nodeConfig', props.nodeConfig);
  };
  // 删除条件分支
  const delTerm = (index: number) => {
    props.nodeConfig.conditionNodes.splice(index, 1);
    props.nodeConfig.conditionNodes.map((item: any, index: any) => {
      item.priority = index + 1;
      item.name = `条件${index + 1}`;
    });
    // resetConditionNodesErr()
    emits('update:nodeConfig', props.nodeConfig);
    if (props.nodeConfig.conditionNodes.length == 1) {
      if (props.nodeConfig.childNode) {
        if (props.nodeConfig.conditionNodes[0].childNode) {
          reData(
            props.nodeConfig.conditionNodes[0].childNode,
            props.nodeConfig.childNode
          );
        } else {
          props.nodeConfig.conditionNodes[0].childNode =
            props.nodeConfig.childNode;
        }
      }
      emits('update:nodeConfig', props.nodeConfig.conditionNodes[0].childNode);
    }
  };
  const reData = (data: any, addData: any) => {
    if (!data.childNode) {
      data.childNode = addData;
    } else {
      reData(data.childNode, addData);
    }
  };
  // 设置人员
  const setPerson = (priority: any) => {
    let { type } = props.nodeConfig;
    if (type === 0) {
      // 发起人
    } else if (type === 1) {
      // 审核人
      flowStore.setApprover(true);
      flowStore.setApproverConfig({
        value: {
          ...JSON.parse(JSON.stringify(props.nodeConfig)),
          ...{
            approverType: props.nodeConfig.approverType
              ? props.nodeConfig.approverType
              : 1,
          },
        },
        flag: false,
        id: _uid,
      });
    } else if (type === 2) {
      // 抄送人
      flowStore.setCopyer(true);
      flowStore.setCopyerConfig({
        value: JSON.parse(JSON.stringify(props.nodeConfig)),
        flag: false,
        id: _uid,
      });
    } else {
      // 条件
      if (props.nodeConfig.conditionNodes[priority - 1].conditionType) return;
      let params = {
        value: JSON.parse(JSON.stringify(props.nodeConfig)),
        priority,
        flag: false,
        id: _uid,
      };
      flowStore.setCondition(true);
      flowStore.setConditionsConfig(params);
    }
  };
  watch(
    () => flowStore.approverConfig1,
    (newVal, oldVal) => {
      if (newVal.flag && newVal.id === _uid) {
        emits('update:nodeConfig', newVal.value.value);
      }
    }
  );
  watch(
    () => flowStore.conditionsConfig1,
    (newVal, oldVal) => {
      if (newVal.flag && newVal.id === _uid) {
        emits('update:nodeConfig', newVal.value);
      }
    }
  );
  watch(
    () => flowStore.copyerConfig1,
    (newVal, oldVal) => {
      if (newVal.flag && newVal.id === _uid) {
        emits('update:nodeConfig', newVal.value.value);
      }
    }
  );
</script>
